﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
        <div class="infinite-list-wrapper"  v-infinite-scroll="loadMthod" style="margin-bottom: 20px;height:640px;overflow-y:auto">
            <div class="list" align="center">
                <el-row>
                    <el-col :span="6" v-for="item in items">
                        <el-card>
                            <a href="/user/toLogin"><img :src="item.productSrcs[0]" style="width:100%;" class="image"></a>
                            <div v-text="item.pname"></div>
                            围观人数：<span v-text="item.lookeramount"></span>
                            叫价次数：<span v-text="item.callamount"></span>
                            <el-row>
                                <el-col :span="6">
                                    <span>距离开始</span>
                                </el-col>
                                <el-col :span="12">
                                    <el-statistic :value="Date.parse(item.starttime)" time-indices
                                                  format="HH时:mm分:ss秒" @finish="startRound(item.id)"
                                    ></el-statistic>
                                </el-col>

                            </el-row>

                        </el-card>
                    </el-col>
                </el-row>
                <p v-if="loading">加载中...</p>
                <p v-if="noMore">没有更多了</p>
            </div>

        </div>
   <!-- <el-row>
        <el-col :span="6" v-for="item in items">
            <el-card>
                <a href="/user/toLogin"><img :src="item.productSrcs[0]" style="width:100%;" class="image"></a>
                <div v-text="item.pname"></div>
                围观人数：<span v-text="item.lookeramount"></span>
                叫价次数：<span v-text="item.callamount"></span>
                <el-row>
                    <el-col :span="6">
                        <span>距离开始</span>
                    </el-col>
                    <el-col :span="12">
                        <el-statistic :value="Date.parse(item.starttime)" time-indices
                                      format="HH时:mm分:ss秒" @finish="startRound(item.id)"
                        ></el-statistic>
                    </el-col>

                </el-row>

            </el-card>
        </el-col>
    </el-row>
-->

</div>
<script>
    var roundList = new Vue({
        el: "#app",
        data: {
            items: [],
            pageSize: 8,
            pageNumber: 1,
            totalPage: 0,
            totalRecords: 0,
            loading: false,
            noMore: false,
        },
        methods: {
            startRound: function (id) {
                //alert(id)
            },
            initRoundList: function () {
                $.post("/round/roundPage", {pageSize: this.pageSize, pageNumber: this.pageNumber}, function (data) {
                    roundList.items = data.list;
                    roundList.totalPage = data.pages;
                    roundList.totalRecords = data.total;
                })
            },
            loadMthod() {
                roundList.loading = true;
                setTimeout(function () {
                    if (roundList.pageSize >= roundList.totalRecords) {
                        roundList.noMore = true;
                        roundList.loading = false;
                        return
                    }
                    roundList.pageSize += 4;
                    roundList.initRoundList();
                    roundList.loading = false;
                }, 2000)
            },
        },
        created() {
            this.initRoundList();
        }
    });
</script>
</body>
</html>
